<template>
  <v-card class="pomodoro-container" elevation="0">
    <v-row align="center" no-gutters>
      <!-- 左侧状态信息 -->
      <v-col cols="auto" class="status-section">
        <div class="status-text">{{ statusText }}</div>
        <div class="session-count">
          <v-icon size="16" class="mr-1">mdi-format-list-bulleted</v-icon>
          今日番茄收成: {{ todayCount }}
        </div>
      </v-col>

      <!-- 中间时间显示 -->
      <v-col class="text-center time-section">
        <div class="time-display" @click="showDialog = true">
          {{ displayTime }}
        </div>
        <div class="timer-status">
          <v-icon size="16" class="mr-1">{{ timerIcon }}</v-icon>
          {{ timerStatus }}
        </div>
      </v-col>

      <!-- 右侧控制按钮 -->
      <v-col cols="auto" class="control-section">
        <v-btn
          :color="isRunning ? 'error' : 'teal'"
          :prepend-icon="isRunning ? 'mdi-pause' : 'mdi-play'"
          variant="flat"
          @click="toggleTimer"
          class="control-btn"
        >
          {{ isRunning ? '暂停' : '番茄专注' }}
        </v-btn>
      </v-col>
    </v-row>

    <!-- 时间选择对话框 -->
    <v-dialog v-model="showDialog" width="auto">
      <v-card>
        <v-card-title>设置番茄钟时间</v-card-title>
        <v-card-text>
          <v-time-picker
            v-model="selectedTime"
            format="24hr"
            :allowed-minutes="allowedMinutes"
          ></v-time-picker>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="showDialog = false">取消</v-btn>
          <v-btn color="teal" @click="setTime">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 响应式数据
const showDialog = ref(false)
const selectedTime = ref('25:00')
const currentTime = ref(25 * 60) // 以秒为单位
const isRunning = ref(false)
const todayCount = ref(3)
const timer = ref<NodeJS.Timeout | null>(null)

// 计算属性
const displayTime = computed(() => {
  const minutes = Math.floor(currentTime.value / 60)
  const seconds = currentTime.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

const statusText = computed(() => {
  if (isRunning.value) {
    return '专注中'
  }
  return '待开始'
})

const timerStatus = computed(() => {
  if (isRunning.value) {
    return '白噪音'
  }
  return ''
})

const timerIcon = computed(() => {
  if (isRunning.value) {
    return 'mdi-volume-high'
  }
  return 'mdi-volume-off'
})

// 允许的分钟数（5分钟间隔）
const allowedMinutes = (m: number) => m % 5 === 0

// 方法
const toggleTimer = () => {
  if (isRunning.value) {
    pauseTimer()
  } else {
    startTimer()
  }
}

const startTimer = () => {
  isRunning.value = true
  timer.value = setInterval(() => {
    if (currentTime.value > 0) {
      currentTime.value--
    } else {
      // 番茄钟结束
      completePomodoro()
    }
  }, 1000)
}

const pauseTimer = () => {
  isRunning.value = false
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}

const completePomodoro = () => {
  pauseTimer()
  todayCount.value++
  // 保存到本地存储
  localStorage.setItem('pomodoro-today-count', todayCount.value.toString())
  localStorage.setItem('pomodoro-last-date', new Date().toDateString())
  // 重置时间
  currentTime.value = 25 * 60
  // 这里可以添加通知或其他完成逻辑
}

const setTime = () => {
  const [hours, minutes] = selectedTime.value.split(':').map(Number)
  currentTime.value = (hours * 60 + minutes) * 60
  showDialog.value = false
}

// 生命周期
onMounted(() => {
  // 从本地存储加载今日计数
  const saved = localStorage.getItem('pomodoro-today-count')
  if (saved) {
    todayCount.value = parseInt(saved)
  }
  // 检查是否是新的一天，如果是则重置计数
  const today = new Date().toDateString()
  const lastDate = localStorage.getItem('pomodoro-last-date')
  if (lastDate !== today) {
    todayCount.value = 0
    localStorage.setItem('pomodoro-last-date', today)
    localStorage.setItem('pomodoro-today-count', '0')
  }
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
  // 保存今日计数
  localStorage.setItem('pomodoro-today-count', todayCount.value.toString())
})
</script>

<style scoped>
.pomodoro-container {
  padding: 12px 16px;
  background: white;
  border-radius: 0;
}

.status-section {
  min-width: 120px;
}

.status-text {
  font-size: 14px;
  color: #2e7d7d;
  font-weight: 500;
  margin-bottom: 4px;
}

.session-count {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
}

.time-section {
  flex: 1;
  cursor: pointer;
}

.time-display {
  font-size: 32px;
  font-weight: 300;
  color: #2e7d7d;
  margin-bottom: 4px;
  transition: color 0.2s;
}

.time-display:hover {
  color: #1a5a5a;
}

.timer-status {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-section {
  min-width: 120px;
  display: flex;
  justify-content: flex-end;
}

.control-btn {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
}
</style>